<template>
  <div class="zh-index">
    <div class="zh-nav-weather">
      <div class="left-weather">
        <div class="city">{{ weather.city }}</div>
        <div class="temperaturn">
          {{ weather.realtime.temperature }}℃
        </div>
      </div>
      <div class="center-search">
        <div class="serach-box">
          <div class="l"><i class="iconfont icon-search"></i></div>
          <div class="input">
            <input type="text" class="input" placeholder="输入梓豪小哥哥有惊喜" v-model="search">
          </div>
          <div class="search" @click="searchBtn">
            搜索
          </div>
        </div>
      </div>
      <div class="right-more"></div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <div>
      <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    </div>
    <div class="zh-index-card">
      <div class="zh-card-box bg-weather" :style="{'background-image': 'url(' + photo + ')'}">
        <!-- 这是一个卡片 -->
        <div class="left">
          <div class="zh-week">{{ week }}</div>
          <div class="zh-date">{{ date }}</div>
          <div class="zh-city"><i class="iconfont icon-notification"></i>{{ weather.city }}</div>
          <div class="zh-weather">{{ weather.realtime.temperature }}℃</div>
          <div class="zh-info">{{ weather.realtime.info }}</div>
        </div>
        <div class="right">
          <div class="zh-svg"><i class="iconfont icon-tianqi"></i></div>
        </div>
      </div>
      <div class="zh-card-box bg-weather">
        <personnelChange></personnelChange>
      </div>
      <div class="zh-card-box bg-weather">
        <effectAnalysis-map></effectAnalysis-map>
      </div>
      <div class="zh-card-box bg-weather" style="font-size:18px;color:#1678ff" v-for="item in 2" :key="item">
        历史上的今天
      </div>
    </div>
  </div>
</template>

<script>
import $axios from 'axios'
import moment from 'moment'
import { mapState } from 'vuex'
import personnelChange from '../components/ech-personnel-change'
import effectAnalysisMap from '../components/ech-effectAnalysis-map'
moment.locale('zh-cn')
export default {
  components: { personnelChange, effectAnalysisMap },
  data () {
    return {
      photo: require('@/assets/image/weather/xiaoyu.jpg'),
      // weather: this.$store.state.weather,
      search: '',
      week: moment().format('dddd'),
      date: moment().format('yyyy年 MM月 DD日')
    }
  },
  beforeMount () {
    if (this.$store.state.weather.city) {

    } else {
      this.getSimpleWeather('上海')
    }
  },
  computed: {
    ...mapState({ weather: 'weather' })
  },
  methods: {
    // 获取天气
    getSimpleWeather (city) {
      $axios.get('/simpleWeather/query', { params: { city, key: '686270c13cfb93121a2738cb1054764a' } }).then(res => {
        this.$store.commit('updateWeather', res.data.result)
      })
    },
    searchBtn () {
      if (this.search === '梓豪小哥哥') {
        this.$toast('你是最可爱的呢')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #1678ff;
  }
  .zh-index {
    padding-top: 50px;
    padding-bottom: 70px;
    .zh-nav-weather {
      padding: 5px 0px;
      height: 50px;
      background-color: #1678ff;
      color: #fff;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      position: fixed;
      top: 0px;
      width: 100%;
      z-index: 99;
      .left-weather {
        width: 60px;
        height: 50px;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        text-align: center;
        justify-content: space-around;
      }
      .center-search {
        flex: 1;
        .serach-box {
          background-color: #fff;
          border-radius: 5px;
          height: 40px;
          padding: 0 10px;
          padding-right: 20px;
          border-radius: 5px;
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          align-items: center;
          .l {
            color: #999;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
          }
          .input {
            height: 40px;
            border: none;
            outline: none;
            font-size: 14px;
            color: #666;
            margin-left: 5px;
            flex: 1;
          }
          .search {
            color: #1678ff;
            font-size: 16px;
            text-align: center;
            line-height: 28px;
            height: 25px;
            border-left: 1px solid #d0e4ff;
            padding-left: 10px;
          }
        }
      }
      .right-more {
        width: 30px;
      }
    }
    .zh-index-card {
      padding: 0px 10px;
      .zh-card-box {
        border-radius: 5px;
        margin-top: 15px;
        padding: 10px;
        height: 250px;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 2px 2px 8px 0px rgba(150,178,191,0.4);
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        .left {
          .zh-week { font-size: 16px; }
          .zh-date { font-size: 16px; }
          .zh-city { font-size: 14px; }
          .zh-weather { font-size: 24px; font-weight: bold;margin-top: 50px; }
          .zh-info { font-size: 14px; }
        }
        .right {
          .zh-svg { .iconfont { font-size: 38px; } }
        }
      }
    }
  }
</style>
